<!-- 
	游戏头部搜索页面 含有搜索框   
	效果链接为  
	https://app.caizhanbao.cn/1524906737%281%294%E7%8E%A92.png
 -->

<template>
	<div class="searchGameTop">
		<div class="topLeft"> <a class="searchT" @click="goIndex"><img src="../../static/img/logo.png" alt=""/></a>  </div>
		<div class="topRight">
			<div class="formInput">
				<span @click="search(searchInput)" ></span>
				<input type="text"  @focus="focus" @keyup.enter="search(searchInput)" @blur="blur"  v-model="searchInput"  placeholder="搜索游戏" />
			</div>
		</div>
	</div>
</template>
<style scoped lang="less">

@import "../common/base.less";
.searchGameTop{
	.px2rem(width,1200);
	.px2rem(height,117);
	.topLeft{
			.px2rem(width,172);
            .px2rem(height,24);
		a{
			
            .px2rem(width,172);
            .px2rem(height,24);
            display:block;
            .px2rem(margin-top,10);
            img{
            	width:100%;
            	height:100%;
            }
		}
		.active{
			color:#fff;
		}
		.searchS{
			.px2rem(margin-left,50);
		}
		float: left;
		.px2rem(line-height,117);
		.px2rem(font-size,24);
		color: #fff;
	}
	.topRight{
		float: right;
	}
	.formInput{
		.px2rem(width,290);
		.px2rem(height,30);
		.px2rem(margin-top,50);
		 background: rgba(0,0,0,0.15);
		.px2rem(border-radius,15);
		color: #fff;
		position: relative;
		span{
			display: block;
			float: left;
			.px2rem(width,20); 
			.px2rem(height,20);
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: url("../../static/img/search_game.png");
			background-size: 100% 100%;
			.px2rem(margin-left,17);
		}
		input{
			float: right;
			.px2rem(width,215);
			.px2rem(height,30);
			.px2rem(margin-right,20);
			background: none;
			.px2rem(font-size,14);
			border: none;
			outline:none;
			 color: #ccc !important;

		}
		input::-webkit-input-placeholder{
            color:#ccc;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#ccc;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#ccc;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:#ccc;
        }
	}
}
</style>
<script type="text/javascript">
import reportEvent from "../components/report.js"

	export default{
		data(){
				return{
					searchInput:"",
					lenovoId:window.sessionStorage.getItem("id")
				}
		},
		mounted(){

			this.changeActive()
			this.token = this.getUrlParam("token");
			if(this.$route.query.info){
				this.searchInput=decodeURI(this.$route.query.info)
			}
		},
		methods:{
			getUrlParam(par) {
	            //获取当前URL
	            var local_url = document.location.href;
	            //获取要取得的get参数位置
	            var get = local_url.indexOf(par +"=");
	            if(get == -1){
	                return false;
	            }
	            //截取字符串
	            var get_par = local_url.slice(par.length + get + 1);
	            //判断截取后的字符串是否还有其他get参数
	            var nextPar = get_par.indexOf("&");
	            if(nextPar != -1){
	                get_par = get_par.slice(0, nextPar);
	            }
	            return get_par;
	        },
	        
			goIndex(){
				let that =this;
					this.$router.push({path:"/",query:{token:that.token}});
            		reportEvent.pageClick(this.lenovoId)

			},
			goAllGame(){
					this.$router.push({path:'../allGame'});

			},
			focus(){
				console.log(1)
				$(".formInput").css("background","rgba(0,0,0,0.3)")
			},
			blur(){
				$(".formInput").css("background","rgba(0,0,0,0.15)")

			},
			changeActive(){
				if(this.$route.path=='/newHome'){
					
					$(".searchT").addClass("active")
				}else if(this.$route.path=='/newAllGame'){
					$(".searchS").addClass('active')
				}else{
					
				}
			},
			 // 跳转搜索页传参
        	search(info){
        		let that =this
        		 	var han = /^[\u4e00-\u9fa5]+$/;
        		    if(info=='' ){
		               this.$toast.top("请输入搜索内容")
		               return false;
		            }
		            if(!han.test(info) || info.length>10){
		            	this.$toast.top("请输入正确的搜索内容")
		               return false;
		            }

        			info = encodeURI(info)

		            this.$router.push({path: '../search', query: {info:info,token:that.token}});

		        },
			}


		
	}
</script>